<!--
* description: 模板-单网格选择弹窗
* author: luojx
* createdDate: 2019-08-02
* log: 2019-08-09 liyanm 加入模块是否显示判断
*  2019-08-15  yinxy  增加输入框类型判断，默认text
-->
<template>
  <section>
    <!-- <div>
    <div > -->
    <div
      id="searchFormGroup"
      class="filter-container filter-params"
      ref="searcheHeight"
      >
      <el-row :gutter="24">
        <el-col
          :span="24"
          class="table-col"
          ref="mustCompHeight"
        >
          <component
            v-for="comp in tableComponents"
            :ref="comp.isRequire ? comp.isRequire+ comp.compKey : comp.compKey"
            :key="comp.compKey"
            :codeField="comp.codeField"
            :textField="comp.textField"
            :popupsKey="comp.compKey"
            :is="comp.component"
            :readonly="comp.readonly"
            :isShow="comp.isShow"
            :code="formField[comp.codeField]"
            :text="formField[comp.textField]"
            @changeCode="getComponentCode"
            @focusCode="getFocusCode"
            :isMul="comp.isMul"
            :disabled="comp.disabled"
            :isRequire="comp.isRequire"
            :span="comp.span || 8"
            :labelName="comp.labelName"
            :lookuptype="comp.lookuptype"
            :dateType="comp.dateType"
            :format="comp.format"
            :dateOptionsType="comp.dateOptionsType"
            :valueObject="curValueObject"
            :inputType="comp.inputType"
            :clearable="comp.clearable"
            :filterable="comp.filterable"
            :parentFileds="comp.parentFileds || ''"
            :mustFields="comp.mustFields || ''"
            :returnCodeField="comp.returnCodeField"
            :returnTextField="comp.returnTextField"
            :otherField="comp.otherField"
            :validrule="comp.validrule"
            :isUseDefault="comp.isUseDefault"
            :isHost="comp.isHost"
            @changeDropValue="getDropValue"
            @changeValuewithSame="comp.getDropValue"
            @emitCode="comp.emitCode"
            @delFiles="comp.delFiles"
            :show="comp.show"
            :groupType="comp.groupType?comp.groupType:''"
            @sendChangeCode="comp.sendChangeCode"
            :changeCodeArray="comp.changeCodeArray"
            :extralParams="comp.extralParams"
            :attribute="comp.attribute"
          ></component>
        </el-col>
      </el-row>
      <!-- <el-row :gutter="24">
        <el-col
          :span="24"
          class="table-col"
          v-show="toggleParam"
        >
          <component
            v-for="comp in tableComponents.filter(o => o.isMust === false)"
            :ref="comp.isRequire ? comp.isRequire+ comp.compKey : comp.compKey"
            :key="comp.compKey"
            :codeField="comp.codeField"
            :textField="comp.textField"
            :popupsKey="comp.compKey"
            :is="comp.component"
            :isShow="comp.isShow"
            :code="formField[comp.codeField]"
            @changeCode="getComponentCode"
            @focusCode="getFocusCode"
            :isMul="comp.isMul"
            :isRequire="comp.isRequire"
            :span="comp.span || 8"
            :labelName="comp.labelName"
            :lookuptype="comp.lookuptype"
            :dateType="comp.dateType"
            :format="comp.format"
            :dateOptionsType="comp.dateOptionsType"
            :valueObject="curValueObject"
            :inputType="comp.inputType"
            :clearable="comp.clearable"
            :filterable="comp.filterable"
            :parentFileds="comp.parentFileds || ''"
            :mustFields="comp.mustFields || ''"
            :returnCodeField="comp.returnCodeField"
            :returnTextField="comp.returnTextField"
            :otherField="comp.otherField"
            :validrule="comp.validrule"
            :isUseDefault="comp.isUseDefault"
            :isHost="comp.isHost"
          ></component>
        </el-col>
      </el-row>-->
      <el-row
        v-if="isshowSearchTableButton"
        :gutter="24"
        class="butClass"
        style="padding-right:15px;"
      >
        <el-col
          :span="24"
          class="table-col"
          
        >
          <mix-button
            v-if="tableButtons.filter(o => o.position === 'top').length !==0"
            name="searchBtns"
            :svFields="svFields"
            :dynamicButtons="(tableButtons.filter(o => o.position === 'top').length !== 0 ) ? tableButtons.filter(o => o.position === 'top') : tableButtons"
            :dynamicComponents="tableComponents"
            :isShowMore="true"
            :formField="formField"
            :templateType="isPopups"
            @toggle="changeToggleParam"
          ></mix-button>
        </el-col>
      </el-row>
    </div>
    <!-- 查询结果  -->

    <el-table
      v-loading="listLoading"
      :data="list"

      :element-loading-text="$store.state.app.loadingText"
      border
      stripe
      v-if="isshowTable"
      :height="tableHeight"
      header-cell-class-name="header-cell"
      highlight-current-row
      ref="multipleTable"
      @current-change="handleTableRowChange"
      @row-dblclick="handleTableRowDbClick"
      @selection-change="handleSelectionChange"
    >
      <el-table-column
        align="center"
        type="selection"
        v-if="isShowSelect"
        :fixed="!isRowDrop"
        width="55"
        :label="$t('sys.content.gridChoose')+'+'"
        filed="chose"
        current-row-key="choose"
      />
      <!-- 选择 -->
      <el-table-column
        align="center"
        :fixed="!isRowDrop"
        :label="$t('sys.content.gridIndex')"
        width="60"
        type="index"
      />
      <!-- 序号 -->
      <el-table-column
        v-for="(col, index) in tableCols.filter(o => o.hidden !== true)"
        :fixed="(dropTableCols[index].fixed || false) && !isRowDrop"
        :label="col.label"
        :key="`col_${index}`"
        :show-overflow-tooltip="true"
        :prop="dropTableCols[index].prop"
        :width="dropTableCols[index].width || null"
        :hidden="dropTableCols[index].hidden"
        :align="dropTableCols[index].align"
        :sortable="dropTableCols[index].sortable || sortable"
      >
        <template slot-scope="{row}">
          <span v-if="dropTableCols[index].isComponent === true && dropTableCols[index].comps">
            <component
              v-for="comp in dropTableCols[index].comps"
              :key="comp.compKey"
              :codeField="comp.codeField"
              :textField="comp.textField"
              :popupsKey="comp.compKey"
              :isShow="row[comp.compareField]===comp.compareValue"
              :is="comp.component"
              :code="row[comp.codeField]"
              :text="row[comp.textField]"
              @changeCode="getRowComponentCode"
              @changeDropValue="getDropValue"
              @clickEvent="comp.clickEvent"
              @focusEvent="comp.focusEvent"
              :comType="row.index+''"
              :isMul="comp.isMul"
              :span="dropTableCols[index].span || 24"
              :isShowLabel="comp.isShowLabel"
              :labelName="comp.labelName"
              :lookuptype="comp.lookuptype"
              :format="comp.format"
              :disabled="comp.disabled"
              :dateType="comp.dateType"
              :dateOptionsType="comp.dateOptionsType"
              :clearable="comp.clearable"
              :filterable="comp.filterable"
              :parentFileds="comp.parentFileds || ''"
              :mustFields="comp.mustFields || ''"
              :returnCodeField="comp.returnCodeField"
              :returnTextField="comp.returnTextField"
              :otherField="comp.otherField"
              :isColComp="true"
              :options="comp.options"
              :isAsync="comp.isAsync"
              :isUseDefault="comp.isUseDefault"
              :isHost="comp.isHost"
            ></component>
          </span>
          <span v-else-if="!dropTableCols[index].isComponent && dropTableCols[index].prop === 'isEnable'">{{(row[dropTableCols[index].prop] === '1') ? '是' : '否' }}</span>
          <span v-else>{{ row[dropTableCols[index].prop] }}</span>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :page-sizes="[10, 20, 30]"
      :page-size="10"
      :prev-text="$t('sys.content.prevPage')"
      :next-text="$t('sys.content.nextPage')"
      v-if="isShowPagination"
      layout="prev, pager, next, sizes, ->, total"
      ref="paginationHeight"
      :total="pageTotal"
      :current-page.sync="listQuery.pageIndex"
    ></el-pagination>
    <div v-show="tableComponents.filter(o => o.type === 'popupsInput').length > 0">
      <component
        v-for="comp in tableComponents.filter(o => o.type === 'popupsInput')"
        OneTableTemplate
        :key="comp.popups.key"
        :codeField="comp.codeField"
        :popupsVisible="comp.popups.state"
        :comType="comp.popups.type"
        :is="comp.popups.component"
        :popupsKey="comp.compKey"
        :code="formField[comp.codeField]"
        @changeCode="getComponentCode"
        @changeDropValue="getDropValue"
        :valueObject="curValueObject"
      ></component>
    </div>
    <!-- </div> -->
    <!-- 底部按钮 -->
    <div
      v-if="isshowSearchTableButton"
      class="filter-container"
      ref="conHeight"
      >
      <el-row
        v-if="isshowSearchTableButton"
        :gutter="24"
        class="butClass"
        ref="conHeight"
      >
        <el-col
          :span="24"
          class="table-col"
          style="padding-right: 20px;"
        >
          <mix-button
            v-if="tableButtons.filter(o => o.position === 'bottom').length !==0"
            name="searchBtns"
            :svFields="svFields"
            :dynamicButtons="tableButtons.filter(o => o.position === 'bottom')"
            :dynamicComponents="tableComponents"
            :isShowMore="true"
            :formField="formField"
            :templateType="isPopups"
            @toggle="changeToggleParam"
          ></mix-button>
        </el-col>
      </el-row>
    </div>
    <!-- </div> -->
  </section>
</template>
<script>
import { oneTableTemplateMixins } from "@/components/mixins/oneTableTemplateMixinsCrmPopup";
import { valueObjectMixins } from "@/components/mixins/valueObjectMixins";
import mixButton from "@/components/basicComponent/mixButton";
import Sortable from "sortablejs";
export default {
  // 组件混入对象：{data[list] methods[queryTable]}
  mixins: [oneTableTemplateMixins, valueObjectMixins],
  components: {
    mixButton
  },
  props: {
    isshowSearchTableButton: { type: Boolean, default: true }, //是否显示查询按钮模块；
    isshowSearchConTile: { type: Boolean, default: true }, //是否显示查询条件标题；
    isshowSearchCon: { type: Boolean, default: true }, //是否显示查询条件模块；
    isshowSearchResult: { type: Boolean, default: true }, //是否显示查询结果模块；
    isshowTable: { type: Boolean, default: true }, //是否显示表格
    isShowPagination: { type: Boolean, default: true } //是否显示分页
  },
  data() {
    return {
      // 是否弹窗
      isPopups: true,
      tableMarginHeight: 55,
      defalutCount: this.dynamicDefalutCount > 0 ? this.dynamicDefalutCount : 3
    };
  },
  methods: {
    getDropValue(val, txt, comName) {
      let that = this;
      if (that.$refs[comName]) {
        that.$refs[comName][0].getData(val, txt, comName);
        that.$refs[comName][0].modelCode = "";
      }
    },
    // handleTableRowDbClick(row) {
    //   // let that = this;
    //   // let parent = that.$utils.getHasFormFieldParentComponent(that);
    //   // this.$emit('changeCode', "", "", this.codeField, this.comType, this.popupsKey, this.textField, this.otherField, row)
    //   // parent.curPopupsVisible=false
    // }
  }
};
</script>
<style>
</style>

